<template>
  <div id="container" :data="data">
    <chartTitle :title="title"></chartTitle>
    <div class="main" :id="id"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import autoSize from '../../uitils/auto-font-size.js'
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    chartTitle
  },
  name: 'chart-pie',
  props: {
    title: String,
    shadow: {
      type: Boolean,
      default: true
    },
    color: {
      type: Array,
      default: () => {
        return ['#00CBFF', '#D33C36', '#FF6600', '#F4CD28', '#00B67C', '#A3D804']
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      minAngle: 0,
      center: ['50%', '55%']
    }
  },
  computed: {
    id: function() {
      return `main-${Math.random()}`
    }
  },
  mounted() {
    setTimeout(() => {
      this.onInit()
    }, 3500)
  },
  updated() {
    setTimeout(() => {
      this.onInit()
    }, 1000)
  },
  methods: {
    fontSize(val, initWidth = 1920) {
      let nowClientWidth = document.documentElement.clientWidth
      return val * (nowClientWidth / initWidth)
    },
    onInit() {
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)
      var option

      const containerWidth = document.getElementById('container').offsetWidth
      const length2Width = (containerWidth - containerWidth * 0.6) / 1.6

      option = {
        animationDuration: 4000,
        animationDurationUpdate: 2000,
        tooltip: {
          show: true,
          formatter: function(params) {
            const { data, color } = params
            const icon = `<span style="display: inline-block;width:10px;height: 10px;background-color: ${color};border-radius: 50%;margin-right: 5px"></span>`
            const name = `<span style="color: ${color};">${data.name}</span>`
            const value = ` / ${data.value}%`
            return icon + name + value
            // return `<span style="width:10px;height: 10px;background-color: ${params.color}"></span>`
          }
        },
        color: this.color,
        legend: {
          show: false,
          orient: 'vertical',
          selectedMode: false,
          top: 'middle',
          right: '5%',
          textStyle: {
            color: '#f2f2f2',
            fontSize: 25
          },
          icon: 'roundRect'
        },
        series: [
          // 主要展示层的
          {
            radius: [0, '60%'],
            center: this.center,
            type: 'pie',
            itemStyle: {
              opacity: 0.8
            },
            emphasis: {
              itemStyle: {
                opacity: 1
              }
            },
            minAngle: this.minAngle,
            label: {
              formatter: params => {
                let name = params.name
                if (name.length > 6) {
                  name = name.substring(0, 5) + '\n' + name.substring(5, -1)
                }
                if (params.data.value === 0) {
                  params.data.label = {
                    show: false
                  }
                  params.data.labelLine = {
                    show: false
                  }
                }
                return `{text|▋${name}}{percent| / ${params.value || 0}%}`
              },
              // width: -autoSize(115),
              // height:  40,
              // padding: [0, -autoSize(115)],
              fontSize: autoSize(14),
              // padding: [0, -130, 30, -length2Width - 10],
              rich: {
                percent: {
                  fontSize: autoSize(14),
                  color: '#fff'
                }
              }
            },
            labelLine: {
              show: false,
              lineStyle: {
                type: 'dashed'
              },
              normal: {
                // length: 12,
                // length2: length2Width,
                // length2: autoSize(115),
                align: 'left',
                lineStyle: {
                  color: '#e6e6e6',
                  type: 'dashed'
                }
              }
            },
            data: this.data
          },
          // 边框的设置
          {
            radius: ['63%', '59%'],
            center: this.center,
            type: 'pie',
            minAngle: this.minAngle,
            emphasis: {
              scale: false
            },
            label: {
              show: false
            },
            data: this.data
          },
          // 圆心
          {
            radius: ['0', '12%'],
            center: this.center,
            type: 'pie',
            color: '#C2D7FD',
            minAngle: 30,
            emphasis: {
              scale: false
            },
            label: {
              show: false
            },
            hoverAnimation: false,
            tooltip: {
              show: false
            },
            z: 5,
            itemStyle: {
              shadowColor: '#000',
              shadowBlur: 30
            },
            data: [{ value: 0 }]
          },
          // 圆心外圈
          {
            radius: ['20%', '19%'],
            center: this.center,
            type: 'pie',
            color: '#C2D7FD',
            minAngle: 30,
            emphasis: {
              scale: false
            },
            label: {
              show: false
            },
            hoverAnimation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              shadowColor: '#000',
              shadowBlur: 10
            },
            z: 5,
            data: [{ value: 0 }]
          }
        ]
      }

      myChart.setOption(option, true)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes lineMove {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}

#container {
  width: 100%;
  height: 30.4vh;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, .2);
  display: flex;
  flex-flow: column;

  .main {
    flex: 1;
  }
}
</style>
